<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.my.assets_detail") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"> </view>
      </view>
    </cloudHeader>
    <view class="container">
      <view class="top_box">
        <view style="z-index: 10">
          <view class="top_title">{{ $t("wallet.totalAssetsConverted") }}</view>
          <view class="total_usdt"
            >{{ totalAsset }}<text class="coin_border">{{ symbol }}</text></view
          >
          <view class="total_cny">≈¥{{ totalAssetCny }}</view>
        </view>
      </view>
      <view class="detail_title">{{ $t("mf.my.assets_detail") }}</view>
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        @scrolltolower="scrolltolower"
      >
        <view class="scorll_content">
          <block v-for="(item, index) in logList.data" :key="index">
            <view class="detail_box flex">
              <view class="flex1">
                <view class="smg">{{ item.info }}</view>
                <view class="date">{{
                  item.created_at | moment("YYYY.MM.DD HH:mm")
                }}</view>
              </view>
              <view
                class="detail_number"
                :style="{ color: item.num > 0 ? '#fee096' : '#fee096' }"
                >{{ item.num }}</view
              >
            </view>
          </block>
          <graceLoading
            :loadingType="
              loading['mf.my.log_list'] ? 1 : logList.has_next_page ? 0 : 2
            "
          ></graceLoading>
        </view>
      </scroll-view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      totalAsset: 0,
      totalAssetCny: 0,
      symbol: null,
    };
  },
  methods: {
    ...mapActions("mf/my", ["loadLogList"]),
    scrolltolower() {
      //避免多次触发
      if (this.logList.has_next_page && !this.loading["mf.my.log_list"]) {
        this.loadLogList({
          page: this.logList.current_page + 1,
          symbol: this.symbol,
        });
      }
    },
  },
  computed: {
    ...mapGetters("mf/my", ["logList"]),
  },
  onLoad(option) {
    console.log(option);
    this.symbol = option.symbol;
    this.totalAsset = option.balance;
    this.totalAssetCny = option.balance_cny;
    this.loadLogList({ symbol: this.symbol });
  },
};
</script>

<style>
.container {
  width: 100%;
  background-image: url("/static/mf/my/assets/asset_box.png");
  background-size: 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 40rpx 20rpx 0;
}
.top_box {
  width: 100%;
  height: 330rpx;
  border-radius: 20rpx;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 0rpx;
  text-align: center;
}
.top_title {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 42rpx;
  margin-bottom: 10rpx;
}
.total_usdt {
  height: 70rpx;
  font-size: 60rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #ffffff;
  line-height: 70rpx;
  margin-bottom: 10rpx;
}
.total_cny {
  height: 33rpx;
  font-size: 28rpx;
  font-family: LucidaGrande-Bold, LucidaGrande;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  line-height: 33rpx;
}
.detail_title {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 42rpx;
  padding-left: 30rpx;
  box-sizing: border-box;
}
.scroll-Y {
  width: 100%;
  position: absolute;
  top: 565rpx;
  bottom: 0;
  left: 0;
  padding: 0 0rpx;
  box-sizing: border-box;
}
.scorll_content {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: #121624;
}
.detail_box {
  width: 100%;
  height: 146rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  padding: 30rpx 40rpx 0;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}
.smg {
  height: 28rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: #ffffff;
  line-height: 28rpx;
  margin-bottom: 20rpx;
}
.date {
  height: 40rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 40rpx;
}
.detail_number {
  height: 56rpx;
  font-size: 40rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fee096;
  line-height: 56rpx;
}
.coin_border {
  display: inline-block;
  border: 1px solid #000;
  min-width: 74rpx;
  height: 32rpx;
  border-radius: 39px;
  border: 1px solid #ebce84;
  line-height: 32rpx;
  font-size: 24rpx;
  transform: translate(20rpx, -10rpx);
  color: #fee096;
}
</style>